<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组解构_赋值细节</title>
</head>
<body>
<h3>1.变量多 单元值少的情况</h3>
<p>变量的数量大于单元值数量时，多余的变量将被赋值为 undefined</p>

<h3>2. 变量少 单元值多的情况：</h3>
<p>变量的数量小于单元值数量时，多余的单元值 不接收</p>
<hr>

<h3>3. 利用 剩余参数 解决变量少 单元值多的情况</h3>
<p>
    剩余参数返回的还是一个数组 <br>
剩余参数... 获取剩余单元值，但只能置于最末位
</p>

<h3>4. 防止有undefined传递单元值的情况，可以设置默认值：</h3>
<p>允许初始化变量的默认值，且只有单元值为 undefined 时默认值才会生效</p>

<h3>5. 按需导入，忽略某些返回值：</h3>

<h3>6. 支持多维数组的结构：</h3>
<hr>


<script>
    // 1. 变量多,单元值少. 多余的变量将被赋值为 undefined
    console.log('------ 1.变量多,单元值少 ------')
    const [a1, b1, c1] = [1, 2]
    console.log(a1) // 1
    console.log(b1) // 2
    console.log(c1) // undefined

    // 2.变量少，单元值多.  多余的单元值 不接收
    console.log('------ 2.变量少，单元值多 ------')
    const [a2, b2] = [1, 2, 3]
    console.log(a2) // 1
    console.log(b2) // 2

    // 3.剩余参数 解决变量少,单元值多.   注意: 剩余参数 只能置于最末位
    console.log('------ 3.剩余参数 解决变量少,单元值多 ------')
    const [a3, b3, ...c3] = [1, 2, 3, 4]
    console.log(a3) // 1
    console.log(b3) // 2
    console.log(c3) // [3, 4]  真数组

    // 4.防止 undefined 传递情况, 可以设置默认值
    console.log('------ 4.防止 undefined 传递情况, 可以设置默认值 ------')
    const [a4 = 0, b4 = 0, c4 = 3] = [1, 2] // 和函数默认参数,有点像
    console.log(a4) // 1
    console.log(b4) // 2
    console.log(c4) // 3

    // 5.按需导入赋值
    console.log('------ 5.按需导入赋值 ------')
    const [a5, b5, , d5] = [1, 2, 3, 4] // 这里我们空了一个位置
    console.log(a5) // 1
    console.log(b5) // 2
    console.log(d5) // 4

    // const arr = [1, 2, [3, 4]]
    // console.log(arr[0])  // 1
    // console.log(arr[1])  // 2
    // console.log(arr[2])  // [3,4]
    // console.log(arr[2][0])  // 3

    // 6.支持多维数组的结构 (嵌套)
    console.log('------ 6.支持多维数组的结构 (嵌套) 情况1------')
    const 数组 = [1, 2, [3, 4]]
    const [a6, b6, c6] = [1, 2, [3, 4]]
    console.log(a6) // 1
    console.log(b6) // 2
    console.log(c6) // [3,4]

    console.log('------ 6.支持多维数组的结构 (嵌套) 情况2------')
    const [a, b, [c, d]] = [1, 2, [3, 4]]
    console.log(a) // 1
    console.log(b) // 2
    console.log(c) // 3
    console.log(d) // 4
</script>

</body>
</html>